<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录 - libman</title>
	<link rel="stylesheet" href="./css/login.css"/>
    <!-- UIkit JS -->
    <link rel="stylesheet" href="./css/uikit.min.css" />
    <script src="./js/uikit.min.js"></script>
    <script src="./js/uikit-icons.min.js"></script>
    <!-- jquery相关依赖 -->
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.pjax.min.js"></script>
    <!-- Toastify依赖 -->
    <script src="./Toastify/toastify-js.js"></script>
    <script src="./Toastify/diyPopStyle.js"></script>
    <link rel="stylesheet" href="./Toastify/toastify.min.css"/>
    <!-- Vue3依赖 -->
    <script src="js/vue.global.prod.js"></script>
	<!-- 控制页面大小 -->
	<script src="./js/ConsistentScaling.js"></script>
</head>
<body id="app">
	<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
		<nav class="uk-navbar-container" uk-navbar>
			<div class="uk-navbar-left uk-margin-large-left uk-margin-right">
	
				<ul class="uk-navbar-nav">
					<li><a href="/">首页</a></li>
					<li>
						<a href="/management.html">管理中心 <span uk-navbar-parent-icon></span></a>
						<div class="uk-navbar-dropdown">
							<ul class="uk-nav uk-navbar-dropdown-nav">
								<li class="uk-active">个人信息</li>
								<li><a href="/management.html">个人信息查看</a></li>
								<li class="uk-nav-header">书籍借阅</li>
								<li><a href="/management.html">藏书列表</a></li>
								<li><a href="/management.html">归还图书</a></li>
								<li class="uk-nav-divider"></li>
								<li><a href="/management.html" v-if="user.user_role=='Admin'">管理中心</a></li>
							</ul>
						</div>
					</li>
					<li><a href="#">LibMan</a></li>
				</ul>
	
			</div>
			<div class="uk-navbar-right uk-margin-large-right">
	
				<ul class="uk-navbar-nav">
					<li v-if="user.user_name" class="uk-active " v-cloak>
						<a href="#">{{user.user_name}} <span uk-navbar-parent-icon></span></a>
						<div class="uk-navbar-dropdown">
							<ul class="uk-nav uk-navbar-dropdown-nav">
								<li class="uk-active">个人信息</li>
								<li><a href="/management.html">个人中心</a></li>
								<li class="uk-nav-divider"></li>
								<li><a href="#">退出登陆</a></li>
							</ul>
						</div>
					</li>
					<li class="uk-active " v-else>
						<a href="./login.html">立即登录</a>
					</li>
				</ul>
			</div>
		</nav>
	</div>
	<main class="main">
		<div class="login-background">
			<div class="uk-box-shadow-small uk-box-shadow-hover-large uk-width-1-2">
				<div class=" login-framework uk-card-secondary">
					<div class="login-framework-left">

							<div class="edge"></div>
							<p class="uk-text-light uk-text-small uk-text-center">* 注册与登录即代表同意<a class="edge-text">《用户协议》</a>与<a class="edge-text">《隐私保护指引》</a></p>

					</div>
					<div class="login-hr"></div>
					<div class="login-framework-right" v-if="!user.user_name">
						<div class="toggle-animation-queued" hidden>
						    <div class="uk-margin">
						        <div class="uk-inline">
						            <span class="uk-form-icon" uk-icon="icon: user"></span>
						            <input class="uk-input" type="text" placeholder="登陆用户名" id="username">
						        </div>
						    </div>

						    <div class="uk-margin">
						        <div class="uk-inline">
						            <span class="uk-form-icon uk-form-icon-flip lock" uk-icon="icon: lock"></span>
						            <input class="uk-input" type="password" placeholder="输入密码" id="password">
						        </div>
						    </div>

							<div class="uk-margin">
							    <div class="uk-inline">
							        <span class="uk-form-icon uk-form-icon-flip lock" uk-icon="icon: lock"></span>
							        <input class="uk-input" type="password" placeholder="确认密码" id="repassword">
							    </div>
							</div>

							<div class="uk-margin">
							    <div class="uk-inline">
							        <span class="uk-form-icon" uk-icon="icon: mail"></span>
							        <input class="uk-input" type="text" placeholder="邮箱" id="mail">
							    </div>
							</div>
							<div class="uk-margin">
							    <div class="uk-inline">
									<button class="code uk-form-icon uk-form-icon-flip" onclick="this.style.backgroundImage='url(\/\/127.0.0.1:8080\/api\/getCode\/img?'+Math.random()+')'"></button>
							        <input class="uk-input" type="text" placeholder="验证码" id="code">
							    </div>
							</div>
							<div class="uk-margin">
							    <div class="uk-inline">
									<button class="uk-button uk-button-default uk-button-small uk-form-icon uk-form-icon-flip" style="width: 5rem;" onclick="sendMailCode(this)">获取</button>
							        <input class="uk-input" type="text" placeholder="邮箱验证码" id="emailCode">
							    </div>
							</div>


							<p class="uk-text-small">已有账号？<a uk-toggle="target: .toggle-animation-queued; animation: uk-animation-fade; queued: true; duration: 300">前往登录</a></p>
							<div class="uk-button uk-button-default" onclick="reg()">注册</div>
						</div>

						<div class="toggle-animation-queued">
							<div class="uk-margin">
							    <div class="uk-inline">
							        <span class="uk-form-icon" uk-icon="icon: user"></span>
							        <input class="uk-input" type="text" placeholder="用户名" id="login_name">
							    </div>
							</div>
							<div class="uk-margin">
							    <div class="uk-inline">
							        <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: lock"></span>
							        <input class="uk-input" type="password" placeholder="密码" id="login_password">
							    </div>
							</div>
							<div class="uk-margin">
							    <div class="uk-inline">
									<button class="code uk-form-icon uk-form-icon-flip" style="z-index: 1;" onclick="this.style.backgroundImage='url(\/\/127.0.0.1:8080\/api\/getCode\/img?'+Math.random()+')'"></button>
							        <input class="uk-input" type="text" placeholder="验证码" id="login_code">
							    </div>
							</div>
							<p class="uk-text-small">没有账号？<a uk-toggle="target: .toggle-animation-queued; animation: uk-animation-fade; queued: true; duration: 300">前往注册</a></p>
							<div class="uk-button uk-button-default" onclick="login()" uk-tooltip="title: 开启图书之旅; pos: bottom">登录</div>
						</div>
					</div>
					<div class="login-framework-right" v-else>
						尊敬的 <span class="uk-text-lead">{{user.user_name}}</span> <br>您已登陆,无需再次登录！<br>
						<a class="uk-button uk-button-default uk-margin" href="/">返回主页</a>
						<a class="uk-button uk-button-primary" href="/management.html">前往中心</a>
					</div>
				</div>
			</div>
		</div>
	</main>
	<footer class="foot">
		<div class="foot-down">
			<p>未经同意，不得转载本网站之所有文章信息及作品 i囡漫笔 版权所有</p>
			<p><a href="#">网上有害信息举报专区</a>  违法不良信息举报电话:+86-13145215384 关爱未成年举报热线:+86-13145215384</p>
			<p><a href="#">隐私声明</a> <a href="#">服务协议</a> <a href="#">COOKIES</a> Copyright © 2023-2024 i囡漫笔 版权所有</p>
		</div>
	</footer>
	<script src="./js/API_Configuration.js"></script>
	<script src="./js/Universal_Functions.js"></script>
	<script src="./js/login/login.js"></script>
</body>
</html>